<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝!嚯嚯嚯</title>
	<link rel="stylesheet" href="淘宝实战.css">
</head>
<body>
	<div class="wrapper">
		<div class="top-nav-wrap">
			<div class="top-nav">
				<ul class="top-nav-l">
				<li class="top-nav-menu china">
					<span class="china-span">中国大陆</span>
					<span class="bgPic xsjPic"></span>
				</li>
				<li class="top-nav-menu loginAndreg">
					<a href="#" class="login">亲,请登录</a>
					<a href="#" class="reg">免费注册</a>
				</li>
				<li class="top-nav-menu phone">
					<a href="#">手机逛淘宝</a>
				</li>
				</ul>

				
				<ul class="top-nav-r">
				<li class="top-nav-menu myTaobao">
					<a href="#">我的淘宝</a>
					<span class="bgPic xsjPic"></span>
				</li>
				<li class="top-nav-menu shopCar">
					<a href="#">
					<span class="bgPic shopCarPic"></span>
					<span>购物车</span>
					</a>
				</li>
				<li class="top-nav-menu like">
					<a href="#">
					<span class="bgPic lickPic"></span>
					<span>收藏夹</span>
					</a>
					<span class="bgPic xsjPic"></span>
				</li>


				<li class="top-nav-menu goods">
					<a href="#">商品分类</a>
				</li>
				<li class="top-nav-menu cutOff">
					<span>|</span>
				</li>

				<li class="top-nav-menu seller">
					<a href="#">卖家中心</a>
					<span class="bgPic xsjPic"></span>
				</li>
				
				<li class="top-nav-menu">
					<a href="#">联系客服</a>
					<span class="bgPic xsjPic"></span>

				</li>
				<li class="top-nav-menu">
					<a href="#">
					<span class="bgPic webNavPic"></span>
					<span>网站导航</span>
					</a>
					<span class="bgPic xsjPic"></span>
				</li>
				</ul>
			</div>
		</div>
<!-- 导航条结束 -->


		<div class="search-wrap">
			<div class="search-con">
				<div class="logo-box">
					<img src="img/logo.png" alt="logo">
				</div>
				<div class="search-box">
					<div class="search-bd">
						<div class="search-tab">
							<ul>
							<li class="select"><span>宝贝</span></li>
							<li><span>天猫</span></li>
							<li><span>店铺</span></li>
							</ul>
						</div>
						<div class="panel">
							<a href="#" class="sousuo"></a>
							<form action="">
								<div class="btn"><button>搜索</button></div>
								<div class="search-inp-box">
									<div class="search-inp">
										<input type="text" placeholder="what??">
									</div>
								</div>
							</form>
							<a href="#" class="camera"></a>
						</div>
					</div>
					<div class="search-ft">
						<ul>
							<li><a href="#">好东西</a></li>
							<li><a href="#">好东西</a></li>
							<li><a href="#">好东西</a></li>
							<li class="select"><a href="#" >高科技</a></li>
							<li><a href="#">东西</a></li>
							<li><a href="#">东西</a></li>
							<li><a href="#">东西</a></li>
							<li><a href="#">东西</a></li>
							<li><a href="#">东西</a></li>
							<li><a href="#">东西</a></li>
							<li><a href="#">好东西</a></li>
						</ul>
						<a href="#" class="more">更多></a>

					</div>
				</div>
				<div class="code-box">
					<a href="#" class="p-th">手机淘宝</a>
					<a href="#" class="code"></a>
					<a href="#" class="close">X</a>
				</div>
			</div>
		</div>


		<div class="scrren-nac-wrap">
			
			<div class="scrren-nav-con">
				<h2>主题市场</h2>
				<ul>
					<li><a href="#">聚划算</a></li>
					<li><a href="#">聚划算</a></li>
					<li><a href="#">聚划算</a></li>
				</ul>
				<ul>
					<li>|</li>
					<li><a href="#">咿咿呀呀</a></li>
					<li><a href="#">咿咿呀呀</a></li>
					<li><a href="#">咿咿呀呀</a></li>
					<li><a href="#">咿咿呀呀</a></li>
					<li><a href="#">咿咿呀呀</a></li>
				</ul>
				<ul>
					<li>|</li>
					<li><a href="#">飞猪`</a></li>
					<li><a href="#">飞猪`</a></li>
					<li><a href="#">飞猪`</a></li>
				</ul>
			</div>
		</div>
		<div class="screen-box-wrap">
			<div class="main">
					<div class="main-inner">
					<div class="inner-left">
						<ul>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li><li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							<li>
								<a href="#">机甲</a>/
								<a href="#">机甲</a>/
								<a href="#">魔神</a>
							</li>
							
						</ul>
					</div>
					<div class="inner-con">
						<div class="pic-box"></div>
						<div class="inner-mall"></div>
					</div>
				</div>
				<div class="col-middle">
					<a href="#" class="maddle-pic1"></a>
					<div class="middle-pic2"></div>
				</div>
				<div class="main-bottom"></div>
			</div>

			<div class="col-right"></div>

		</div>
	</div>
</body>
</html>